import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';

export class DefaultPage extends Component {
  static propTypes = {
    order: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  render() {
    return (
      <div className="order-default-page">
        <div className="nav">
          <i className='iconfont'>&#xe667;</i>
          <p className="nav-title">提交订单</p>
        </div>

        <div className="info flex jc-sb">
            <div className="person">
              收货人
            </div>
            <div className="address">
              <i className="iconfont">&#xe606;</i>           
              <span>请完善收货地址</span> 
            </div>
            <div className="detail">
              <i className="iconfont">&#xe602;</i>
            </div>
        </div>
        <div className="borderbd"></div>

        <ul className="option">
            <li className="flex jc-sb">
              <div>订购人信息</div>
              <p>请填写</p>
              <i className="iconfont">&#xe602;</i>
            </li>
            <li className="flex jc-sb">
              <div>送达日期</div>
              <p>请选择</p>
              <i className="iconfont">&#xe602;</i>
            </li>
            <li className="flex jc-sb">
              <div>贺卡留言</div>
              <input placeholder="填写即赠精美贺卡"/>
              <i className="iconfont">&#xe602;</i>
            </li>
        </ul>

        <div className="remark flex jc-sb">
          <p>备注/优惠券/权益卡/发票</p>
          <i className="iconfont">&#xe602;</i>
        </div>

        <div className="goodsInfo flex jc-sb">
          <img src="https://img01.hua.com/uploadpic/newpic/9010966.jpg_220x240.jpg" width="64"/>
          <div>
            <p>[鲜花]一往情深</p>
            <p>数量: × 1</p>
          </div>
          <span>￥ 239</span>
        </div>

        <div className="prices flex jc-sb">
              <div>商品总金额</div>
              <i className="iconfont">&#xe602;</i>
        </div>



        <div className="footer flex jc-sb">
          <div className="total flex">
            <span>合计:</span>
            <p>￥239</p>
          </div>
          <div className="close">去结算</div>

        </div>
      </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    order: state.order,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);
